// CSS外观样式 & HTML编辑器功能
document.write('\
<style type="text/css">\
#abcEdit{border:1px solid #ccc;overflow:hidden;font-size:14px;}\
#abcEdit input{cursor:pointer;border:0;background:#f5f5f5;border-radius:3px;padding:0;font-size:12px;}\
#abcEditCode{border:0;}\
#abcEditDiv{overflow:auto;word-wrap:break-word;padding:5px;}\
#abcEdit, #abcEditCode{line-height:22px;font-family:consolas,microsoft yahei,SimSun;}\
#abcEdit a, #abcEdit select{cursor:pointer;}\
#abcEdit select{font-size:12px;width:50px;border:0;background:#f5f5f5;}\
#abcEditMenu,#abcEditMenu2,#abcEditMode{border-bottom:1px solid #ccc;line-height:30px;height:30px;padding:0 10px;background:#f5f5f5;}\
#abcEditMenu a,#abcEditMenu2 a,#abcEditMode{text-decoration:none;color:#333;}\
</style>\
<div id="abcEdit">\
    <a href="javascript:abcEditMode()" id="abcEditMode">◀ 返回 编辑器模式　【提示】：网页代码使用方法 可百度搜索 HTML教程 </a>\
    <div id="abcEditMenu">\
        <a title="更多 More" onClick="abcEditMore()" href="javascript:" id="abcEditMore">▼</a>&nbsp;\
        <a title="▶ HTML源代码编辑模式" href="javascript:abcEditCode()" id="abcEditHtml">&#60;/&#62;</a>&nbsp;\
        <a title="撤消 Undo【 CTRL+Z 】" onClick="document.execCommand(\'Undo\')" href="javascript:">↻</a>\
        <a title="重做 Redo【 CTRL+Y 】" onClick="document.execCommand(\'Redo\')" href="javascript:">↺</a>&nbsp;\
        <a title="增加编辑框高度" onClick="abcEditDiv.style.height=parseInt(abcEditDiv.style.height)+200+\'px\';" href="javascript:">⇩</a>\
        <a title="减少编辑框高度" onClick="abcEditDiv.style.height=parseInt(abcEditDiv.style.height)-200+\'px\';" href="javascript:">⇧</a>&nbsp;\
        <a title="粗体 Bold【 CTRL+B 】" onClick="document.execCommand(\'Bold\')" href="javascript:"><b>Ｂ</b></a>\
        <a title="下划线 Underline【 CTRL+U 】" onClick="document.execCommand(\'Underline\')" href="javascript:"><u>Ｕ</u></a>\
        <a title="斜体 Italic【 CTRL+I 】" onClick="document.execCommand(\'Italic\')" href="javascript:"><i>Ｉ</i></a>&nbsp;\
        <input type="button" value="IMG" title="插入图片 Image" onClick="abcEditImg()">\
        <input type="button" value="URL" title="插入链接 Link" onClick="abcEditUrl()">&nbsp;\
        <select onChange="document.execCommand(\'FontSize\',false,this.value)">\
            <option selected="selected">大小</option>\
            <option value="1" style="font-size:10px;">1号字</option>\
            <option value="2" style="font-size:12px;">2号字</option>\
            <option value="3" style="font-size:16px;">3号字</option>\
            <option value="4" style="font-size:20px;">4号字</option>\
            <option value="5" style="font-size:24px;">5号字</option>\
            <option value="6" style="font-size:28px;">6号字</option>\
            <option value="7" style="font-size:32px;">7号字</option>\
        </select>\
        <select onChange="document.execCommand(\'ForeColor\',false,this.value)">\
        <option selected="selected">字色</option>\
            <option value="black"     style="color:black;">黑 Black</option>\
            <option value="gray"      style="color:gray;">灰 Gray</option>\
            <option value="white"     style="color:beige;">白 White</option>\
            <option value="red"       style="color:red;">红 Red</option>\
            <option value="orange"    style="color:orange;">橙 Orange</option>\
            <option value="yellow"    style="color:yellow;">黄 Yellow</option>\
            <option value="green"     style="color:green;">绿 Green</option>\
            <option value="cyan"      style="color:cyan;">青 Cyan</option>\
            <option value="blue"      style="color:blue;">蓝 Blue</option>\
            <option value="purple"    style="color:purple;">紫 Purple</option>\
            <option value="maroon"    style="color:maroon;">栗 Maroon</option>\
            <option value="brown"     style="color:brown;">褐 Brown</option>\
            <option value="pink"      style="color:pink;">粉 Pink</option>\
            <option value="indigo"    style="color:indigo;">靛蓝 Indigo</option>\
            <option value="navy"      style="color:navy;">深蓝 Navy</option>\
            <option value="teal"      style="color:teal;">蓝绿 Teal</option>\
            <option value="limegreen" style="color:limegreen;">橙绿 LimeGreen</option>\
            <option value="violet"    style="color:violet;">紫罗兰 Violet</option>\
        </select>\
        <select onChange="document.execCommand(\'BackColor\',false,this.value)">\
            <option selected="selected">底色</option>\
            <option value="black"     style="background-color:black;color:beige">黑 Black</option>\
            <option value="gray"      style="background-color:gray;">灰 Gray</option>\
            <option value="white"     style="background-color:white;">白 White</option>\
            <option value="red"       style="background-color:red;">红 Red</option>\
            <option value="orange"    style="background-color:orange;">橙 Orange</option>\
            <option value="yellow"    style="background-color:yellow;">黄 Yellow</option>\
            <option value="green"     style="background-color:green;">绿 Green</option>\
            <option value="cyan"      style="background-color:cyan;">青 Cyan</option>\
            <option value="blue"      style="background-color:blue;">蓝 Blue</option>\
            <option value="purple"    style="background-color:purple;">紫 Purple</option>\
            <option value="maroon"    style="background-color:maroon;">栗 Maroon</option>\
            <option value="brown"     style="background-color:brown;">褐 Brown</option>\
            <option value="pink"      style="background-color:pink;">粉 Pink</option>\
            <option value="indigo"    style="background-color:indigo;">靛蓝 Indigo</option>\
            <option value="navy"      style="background-color:navy;">深蓝 Navy</option>\
            <option value="teal"      style="background-color:teal;">蓝绿 Teal</option>\
            <option value="limegreen" style="background-color:limegreen;">橙绿 LimeGreen</option>\
            <option value="violet"    style="background-color:violet;">紫罗兰 Violet</option>\
        </select>\
        <input type="button" value="清除格式" title="清除选中的标签格式 RemoveFormat" onClick="document.execCommand(\'RemoveFormat\')">\
    </div>\
    <div id="abcEditMenu2">\
        <input type="button" value="取消链接" title="取消链接 Unlink" onClick="document.execCommand(\'Unlink\')">&nbsp;\
        <input type="button" value="水平线" title="水平线 HorizontalRule" onClick="abcEditHr()">\
        <input type="button" value="删除线" title="删除线 StrikeThrough" onClick="document.execCommand(\'StrikeThrough\')">&nbsp;\
        <input type="button" value="数字" title="数字排列 OrderedList" onClick="document.execCommand(\'InsertOrderedList\')">\
        <input type="button" value="圆点" title="实心圆点排列 UnorderedList" onClick="document.execCommand(\'InsertUnorderedList\')">&nbsp;\
        <input type="button" value="缩" title="向右(后)缩进 Indent" onClick="document.execCommand(\'Indent\')">\
        <input type="button" value="进" title="向左(前)缩进 Outdent" onClick="document.execCommand(\'Outdent\')">&nbsp;\
        <input type="button" value="向左" title="向左对齐 Left" onClick="document.execCommand(\'JustifyLeft\')">\
        <input type="button" value="居中" title="居中对齐 Center" onClick="document.execCommand(\'JustifyCenter\')">\
        <input type="button" value="向右" title="向右对齐 Right" onClick="document.execCommand(\'JustifyRight\')">&nbsp;\
        <input type="button" value="上标" title="上标 SuperScript" onClick="document.execCommand(\'SuperScript\')">\
        <input type="button" value="下标" title="下标 SubScript" onClick="document.execCommand(\'SubScript\')">&nbsp;\
    </div>\
    <div id="abcEditDiv" contenteditable="true" onblur="notFocus(abcEditID);"></div>\
    <textarea id="abcEditCode" onblur="notFocus(abcEditID);"></textarea>\
</div>\
');
//运行设置
window.onload = abcEditSet(abcEditID, abcEditWidth, abcEditHeight);
//设置参数
function abcEditSet(abcEditID, abcEditWidth, abcEditHeight){
    var abcEdit      = document.getElementById('abcEdit');
    var abcEditID    = document.getElementById(abcEditID);
    var abcEditDiv   = document.getElementById('abcEditDiv');
    var abcEditCode  = document.getElementById('abcEditCode');
    var abcEditMode  = document.getElementById('abcEditMode');
    var abcEditMenu2 = document.getElementById('abcEditMenu2');
    abcEditID.style.display    = 'none'; //隐藏文本框
    abcEditMenu2.style.display = 'none'; //隐藏第二行菜单
    abcEditMode.style.display  = 'none';
    abcEditCode.style.display  = 'none';
    abcEdit.style.width      = abcEditWidth; //编辑器宽度
    abcEditDiv.style.height  = abcEditHeight; //编辑器高度
    abcEditCode.style.width  = abcEditWidth; //代码框宽度
    abcEditCode.style.height = abcEditHeight; //代码框高度
    abcEditDiv.innerHTML     = abcEditID.value; //复制文本框内容
    abcEditCode.value        = abcEditDiv.innerHTML; //复制文本框内容
}
//编辑器模式
function abcEditMode(){
var abcEditDiv   = document.getElementById('abcEditDiv');
var abcEditCode  = document.getElementById('abcEditCode');
var abcEditMode  = document.getElementById('abcEditMode');
var abcEditMenu  = document.getElementById('abcEditMenu');
    abcEditDiv.style.display  = 'block';
    abcEditMenu.style.display = 'block';
    abcEditMode.style.display = 'none';
    abcEditCode.style.display = 'none';
    abcEditDiv.innerHTML      = abcEditCode.value;
}
//HTML代码模式
function abcEditCode(){
    var abcEditDiv   = document.getElementById('abcEditDiv');
    var abcEditCode  = document.getElementById('abcEditCode');
    var abcEditMode  = document.getElementById('abcEditMode');
    var abcEditMore  = document.getElementById('abcEditMore');
    var abcEditMenu  = document.getElementById('abcEditMenu');
    var abcEditMenu2 = document.getElementById('abcEditMenu2');
    abcEditDiv.style.display  = 'none';
    abcEditMenu.style.display = 'none';
    abcEditMode.style.display = 'block';
    abcEditCode.style.display = 'block';
    abcEditMenu2.style.display= 'none';
    abcEditMore.innerHTML     = "▼";
    abcEditCode.value         = abcEditDiv.innerHTML;
}
//更多
function abcEditMore(){
    var abcEditMore  = document.getElementById('abcEditMore');
    var abcEditMenu2 = document.getElementById('abcEditMenu2');
    if(abcEditMore.innerHTML == "▼"){
        abcEditMore.innerHTML = "▲";
        abcEditMenu2.style.display = 'block';
    }else{
        abcEditMore.innerHTML = "▼";
        abcEditMenu2.style.display = 'none';
    }
}
//插入链接
function abcEditUrl(){
    var url = prompt('请输入链接网址：','');
    document.execCommand('createlink',false,url);
}
//插入图片 弹出对话框 请求输入图片地址
function abcEditImg(){
    var abcEditDiv   = document.getElementById('abcEditDiv');
    var img = prompt('请输入图片地址：','');
    if(navigator.userAgent.indexOf('MSIE') >= 0){
        abcEditDiv.focus();
        document.selection.createRange().pasteHTML('<img src='+img+'>');
    }else{
        document.execCommand('InsertImage',false,img);
    }
}
//水平线
function abcEditHr(){
    var abcEditDiv = document.getElementById('abcEditDiv');
    if(navigator.userAgent.indexOf('MSIE') >= 0){
        abcEditDiv.focus();
        document.selection.createRange().pasteHTML('<hr />');
    }else{
        document.execCommand('InsertHorizontalRule');
    }
}
//失去焦点 保存内容到文本框
function notFocus(abcEditID){
    var abcEditID   = document.getElementById(abcEditID);
    var abcEditDiv  = document.getElementById('abcEditDiv');
    var abcEditCode = document.getElementById('abcEditCode');
    if(abcEditDiv.style.display == "none"){
        abcEditID.value = abcEditCode.value;
    }else{
        abcEditID.value = abcEditDiv.innerHTML;
    }
    //alert(abcEditID.value);//检查内容
}